// import { runInThisContext } from 'vm'
import bg from '../../image/宣纸.jpg'

interface lines{
        ml:number,
        mr:number,
        mt:number,
        mb:number,
        paths:number[][]
}

// export interface 地块type {
//     name: string
//     lines: lines
// }



export class 地块 {
    name: string
    ml:number
    mr:number
    mt:number
    mb:number
    paths:number[][]
    bg:HTMLImageElement

    static group:地块[] = []

    constructor(name:string, lines:lines) {
        this.name = name
        this.ml = lines.ml
        this.mr = lines.mr
        this.mt = lines.mt
        this.mb = lines.mb
        this.paths = lines.paths
        地块.group.push(this)
        this.bg = new Image()
        this.bg.src = bg
    }
    darw(ctx: CanvasRenderingContext2D) {
        ctx.beginPath()
        ctx.moveTo(this.paths[0][0], this.paths[0][1])
        this.paths.forEach((item, index) => {
            if (index === 0) {
                return
            }
            ctx.lineTo(item[0], item[1])

        })
        ctx.closePath()
        // ctx.stroke()
        ctx.fill()
    }
    onhover(ctx: CanvasRenderingContext2D){
        // console.log('点击了',this.name);
        
        
        const ptrn = ctx.createPattern(this.bg,"repeat")!
        ctx.fillStyle = ptrn
        this.darw(ctx)
        ctx.fillStyle = 'red'
        ctx.font = 'bold italic 50px monspace'
        ctx.fillText(this.name,this.paths[0][0]-20,this.paths[0][1])
        ctx.closePath()

        
    }
    onout(ctx: CanvasRenderingContext2D,ptrn:CanvasPattern){
        // console.log('移出了',this.name);
        ctx.fillStyle = ptrn
        this.darw(ctx)
        
    }
}

